<!DOCTYPE html>
<html>
<head>
    <title><%= __('overview.informationOverview')%></title>
    <% include common/meta.ejs %>
    <% include common/public.ejs %>
    <style>
        .barChart {
            height: 10rem;
            width: 100%;
        }

        .barRow {
            border-top: 1px solid #5e5e5e;
            padding-top: 10px;
        }

        .weui_navbar_item {
            padding: 6px 0;
        }

        .weui-picker-overlay, .weui-picker-container {
            bottom: 55px;
        }

        #shopList {
            font-size: 1rem;
            font-weight: 700;
            text-align: center;
        }

        .weui_btn {
            line-height: 1.5em;
        }

        .weui_cell button {
            margin-right: 10px;
            height: 25px;
            min-width: 60px;
            max-width: 110px;
            text-align: center;
        }

        .weui_cell .selected {
            background-color: #1566FF;
            border: none;
            color: #fff;
        }

        .col_container{
            padding-top:10px;
            padding-bottom:10px;
            background: #ffffff;
        }
        .col_right_border{
            border-right: 1px #eeeeee solid;
        }
        .col_item{
            width:33%;
            text-align: center;
            background-color: #ffffff;
        }
        .col_item_number{
            font-size: 20px;
            font-family: inherit;
            font-weight: 500;
            line-height: 1.1;
            color: #1566FF;
        }
        .col_item_title{
            color:#cccccc;
        }
        .col_item_center{
            width:33%;
            text-align: center;
            background-color: #ffffff;
        }
        .col_1{
            width:100%;
            padding-top:10px;
            padding-bottom: 46px;
            height:40px;
        }
        .chooseBtn{
            margin-right: 10px;
            height: 25px;
            min-width: 60px;
            max-width: 110px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="weui_tab">
    <div class="weui_tab_bd">
        <input type="hidden" id="shopIds"/>
        <div class="weui-row weui-no-gutter">
            <div  class="col_1"
                 style="text-align: center  ;  background-color: #1566ff;color: #ffffff !important;">
                <p id="allCollectionTitle" style="margin-top: 11px"><%= __('overview.PFNOTWeek')%></p>
                <div class="h1" id="allCollectCount" style="font-size: 28px;font-family: inherit;font-weight: 500;
                line-height: 1.1;color: inherit;    margin-top: 6px;margin-bottom: 10.5px;">0
                </div>
            </div>
        </div>
        <div class="col_container">
            <div class="weui-row weui-no-gutter">
                <div class="col_item col_right_border" >
                    <div class="h1 col_item_number" id="allShop" >0
                    </div>
                    <p class="col_item_title"><%= __('overview.numberOfStores')%></p>
                </div>

                <div class="col_item_center col_right_border"
                     >
                    <div class="h1 col_item_number" id="allDevice">0
                    </div>
                    <p class="col_item_title"><%= __('overview.numberOfEquipments')%></p>
                </div>
                <div class="col_item"
                     >
                    <div class="h1 col_item_number" id="exDevice">0
                    </div>
                    <p class="col_item_title"><%= __('overview.numberOfAbnormalEquipments')%></p>
                </div>
            </div>
        </div>
        <div class="weui_cells">
            <div class="weui_cell">
                <button class="operType" id="tweekBtn"
                        data-value="tweek"><%= __('overview.thisWeek')%>
                </button>
                <button class="operType" id="pweekBtn"
                        data-value="pweek"><%= __('overview.lastWeek')%>
                </button>
                <button class="operType" id="tmonthBtn"
                        data-value="tmonth"><%= __('overview.thisMonth')%>
                </button>
                <button class="operType" id="pmonthBtn"
                        data-value="pmonth"><%= __('overview.lastMonth')%>
                </button>

                <input class="chooseBtn" type="button" id="chooseShop" value="<%= __('overview.storeSelection')%>"/>
                <input type="hidden" value="" id="allShopName"/>
                <input type="hidden" value="" id="allShopId"/>
                <input type="hidden" value="" id="curChartTitle"/>
                <input type="hidden" value="" id="curStartDate"/>
                <input type="hidden" value="" id="curEndDate"/>
                <input type="hidden" value="" id="tempStr"/>
            </div>
        </div>

        <div id="shopsChart" style=" min-height: 55% ; width: 100%;"></div>
    </div>

    <div class="weui_tabbar">
        <a href="index" class="weui_tabbar_item weui_bar_item_on">
            <div class="weui_tabbar_icon">
                <img src="<%= global.config.publicPath %>/page/images/icon_nav_toast.png" alt="">
            </div>
            <p class="weui_tabbar_label"><%= __('homepage.homepage')%></p>
        </a>
        <a href="news" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="<%= global.config.publicPath %>/page/images/icon_nav_button.png" alt="">
            </div>
            <p class="weui_tabbar_label"><%= __('news.news')%></p>
        </a>
        <a href="account" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <img src="<%= global.config.publicPath %>/page/images/icon_nav_user.png" alt="">
            </div>
            <p class="weui_tabbar_label"><%= __('me.me')%></p>
        </a>
    </div>
</div>
<% include common/footer.ejs %>
<script src="<%= global.config.cdn %>/echarts/3.3.1/echarts.js"></script>
<script>
    'use strict';
    const dateTool = {
        /**
         * 本周第一天
         */
        showWeekFirstDay: function (Nowdate, offset) {
            let WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000 - offset * 86400000);
            return this.dateFormatter(WeekFirstDay, 'yyyy-MM-dd');
        },
        /**
         * 本周最后一天
         */
        showWeekLastDay: function (Nowdate, offset) {
            let WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000 - offset * 86400000);
            let WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000 + 1000 * 60 * 60 * 24);
            return this.dateFormatter(WeekLastDay, 'yyyy-MM-dd');
        },
        /**
         * 本月第一天
         */
        showMonthFirstDay: function (Nowdate, offset) {
            let MonthFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth() - offset, 1);
            return this.dateFormatter(MonthFirstDay, 'yyyy-MM-dd');
        },
        /**
         * 本月最后一天
         */
        showMonthLastDay: function (Nowdate, offset) {
            let MonthNextFirstDay = new Date(Nowdate.getFullYear(), Nowdate.getMonth() - offset + 1, 1);
            let MonthLastDay = new Date(MonthNextFirstDay - 86400000 + 1000 * 60 * 60 * 24);
            return this.dateFormatter(MonthLastDay, 'yyyy-MM-dd');
        },

        dateFormatter: function (date, format) {
            let o = {
                "M+": date.getMonth() + 1, //month
                "d+": date.getDate(),      //day
                "h+": date.getHours(),     //hour
                "m+": date.getMinutes(),   //minute
                "s+": date.getSeconds(),   //second
                "w+": "天一二三四五六".charAt(date.getDay()),   //week
                "q+": Math.floor((date.getMonth() + 3) / 3),  //quarter
                "S": date.getMilliseconds() //millisecond
            };
            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1,
                    (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (let k in o) {
                if (new RegExp("(" + k + ")").test(format)) {
                    format = format.replace(RegExp.$1,
                        RegExp.$1.length == 1 ? o[k] :
                            ("00" + o[k]).substr(("" + o[k]).length));
                }
            }
            return format;
        }
    };

    $(function () {
        let userId = '<%= userData && userData.id %>';
        //alert(userId);
        $(".operType").click(function () {
            $(".operType").removeClass('selected');
            $(this).addClass('selected');
            let va = $(this).data('value'), now = new Date();
            if (va == 'tweek') {
                loadData(userId, dateTool.showWeekFirstDay(now, 0), dateTool.showWeekLastDay(now, 0), Dolphin.i18n.get("views.weekPassengerFlow"));
            } else if (va == 'pweek') {
                loadData(userId, dateTool.showWeekFirstDay(now, 7), dateTool.showWeekLastDay(now, 7), Dolphin.i18n.get("views.passengerLastWeek"));
            } else if (va == 'tmonth') {
                loadData(userId, dateTool.showMonthFirstDay(now, 0), dateTool.showMonthLastDay(now, 0), Dolphin.i18n.get("views.monthPassengerFlow"));
            } else if (va == 'pmonth') {
                loadData(userId, dateTool.showMonthFirstDay(now, 1), dateTool.showMonthLastDay(now, 1),Dolphin.i18n.get("views.lastPassengerFlow") );
            }
        });

        $("#tweekBtn").click();



    });


    function chooseShop(){
        let curShopName = $('#chooseShop').val();
        $('#chooseShop').val(Dolphin.i18n.get("overview.storeSelection"));
        //alert(curShopName);
        let shopNames = $('#allShopName').val().split(',');
        let shopIds = $('#allShopId').val().split(',');
        let i=0;

        for(;i<shopNames.length;i++){
            if(curShopName==shopNames[i]){
                break;
            }
        }
        //alert(shopIds[i]);
        let da = {};
        da = {"dateType": "4", "shopIdsStr": shopIds[i]};
        if ($('#curStartDate').val()){
            da._startDate = $('#curStartDate').val();
        }
        if ($('#curEndDate').val()){
            da._endDate = $('#curEndDate').val();
        }
        //alert(da._startDate+'|||||||'+da._endDate)
        Dolphin.ajax({
            url: '/api/783f76c9bb0348c28df1eea5c7a648e0',
            type: Dolphin.requestMethod.POST,
            data: Dolphin.json2string({properties:da}),
            loading: true,
            onSuccess: function (reData) {

                //alert(reData);

                let prop = (reData.value && reData.value.properties) || {};
                //$('#allCollectCount').html(prop.totalDxin);
                let shopsChart = echarts.init(document.getElementById('shopsChart'));
                // 指定图表的配置项和数据
                let shopsChartOption = {
                    color: ['#1566FF'],
                    title: {
                        text: $('#curChartTitle').val()+"  "+curShopName
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: Dolphin.i18n.get("views.passengerFlow"),
                            type: 'bar',
                            barWidth: '80%',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside'
                                }
                            },
                            data: []
                        }
                    ]
                };
                shopsChartOption.xAxis[0].data = prop.chartNames;
                shopsChartOption.series[0].data = prop.chartDatas;
                shopsChart.setOption(shopsChartOption);
            }
        });
    }

    function loadData(userId, startDate, endDate, title) {
        if (!userId) {
            return false;
        }
        Dolphin.ajax({
            url: '/api/65e7adad33f14f8e8c6454783125bcf1@accountId=' + userId,
            type: Dolphin.requestMethod.GET,
            onSuccess: function (reData) {
                let prop = (reData.value && reData.value.properties) || {};
                $('#allShop').html(prop.shopSize);
                $('#allDevice').html(prop.deviceSize);
                $('#exDevice').html(prop.exDeviceSize);
                $('#shopIds').val(prop.shopIdsStr);

                $('#curChartTitle').val(title);
                $('#allShopName').val(prop.shopNames);
                $('#allShopId').val(prop.shopIdList);
                $('#curStartDate').val(startDate);
                $('#curEndDate').val(endDate);

                //alert(prop.shopNames);

                $("#chooseShop").val(Dolphin.i18n.get("overview.storeSelection"))
                //初始化select
                $("#chooseShop").select({
                    title: Dolphin.i18n.get("overview.storeSelection"),
                    items:prop.shopNames,
                    onChange:chooseShop
                });

                let da = {};
                da = {"dateType": "4", "shopIdsStr": $('#shopIds').val()};
                if (startDate)
                    da._startDate = startDate;
                if (endDate)
                    da._endDate = endDate;

                console.log(da);
                Dolphin.ajax({
                    url: '/api/783f76c9bb0348c28df1eea5c7a648e0',
                    type: Dolphin.requestMethod.POST,
                    data: Dolphin.json2string({properties:da}),
                    loading: true,
                    onSuccess: function (reData) {
                        let prop = (reData.value && reData.value.properties) || {};

                        //alert(prop.chartDatas);
                        $('#tempStr').val(prop.chartDatas);
                        //alert($('#tempStr').val());
                        let chartDatas = $('#tempStr').val().split(',');
                        let num=0;
                        for(let i=0;i<chartDatas.length;i++){
                            num+=parseInt(chartDatas[i]);
                        }
                        $('#allCollectionTitle').html(title+" "+Dolphin.i18n.get("views.count"));
                        $('#allCollectCount').html(num);
                        let shopsChart = echarts.init(document.getElementById('shopsChart'));
                        // 指定图表的配置项和数据
                        let shopsChartOption = {
                            color: ['#1566FF'],
                            title: {
                                text: title
                            },
                            grid: {
                                left: '1%',
                                right: '1%',
                                bottom: '3%',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: [],
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: Dolphin.i18n.get("views.passengerFlow"),
                                    type: 'bar',
                                    barWidth: '80%',
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'inside'
                                        }
                                    },
                                    data: []
                                }
                            ]
                        };
                        shopsChartOption.xAxis[0].data = prop.chartNames;
                        shopsChartOption.series[0].data = prop.chartDatas;
                        shopsChart.setOption(shopsChartOption);
                    }
                });
            }
        });
    }

</script>
</body>
</html>